<template>
  <div class="common-page page-stats-order-government-city" v-loading.fullscreen="loading">
    <div class="common-page__head">
      <!-- <comp-paths class="route" :paths="['/stats', $route.fullPath]"></comp-paths> -->
      <div class="title">
        <div class="text">{{ $options.title }}</div>
        <el-date-picker type="date" v-model="startTime" size="small" style="margin-right: 12px; width: 200px"
                        format="起始yyyy年M月d日" value-format="timestamp" placeholder="起始日期" :readonly="loading"
                        @change="search()"></el-date-picker>
        <el-date-picker type="date" v-model="endTime" size="small" style="margin-right: 12px; width: 200px"
                        format="截止yyyy年M月d日" value-format="timestamp" placeholder="截止日期" :readonly="loading"
                        @change="search()"></el-date-picker>
        <el-button type="plain" size="small" icon="el-icon-top" @click="handleBack()" v-if="cityId || areaId">返回上一级</el-button>
      </div>
    </div>
    <div class="common-page__body page-stats-order-government-city__body">
      <div class="row">
        <div class="col col--2em">排名</div>
        <div class="col">
          <span v-if="!cityId">地市</span>
          <span v-if="cityId">区县/市级部门</span>
          <span v-if="areaId">区县部门</span>
        </div>
        <div class="col col--4em">事项总数</div>
        <div class="col col--4em">办结数</div>
        <div class="col col--4em">办结率</div>
      </div>
      <div class="row" v-for="(city, index) in cityList" :key="city.id">
        <div class="col col--2em">
          <span v-if="city.stats.ordersTotal > 0">{{ index + 1 }}</span>
          <span v-else>-</span>
        </div>
        <div class="col" v-if="cityId">{{ city.name }}</div>
        <div class="col col--click" @click="setCity(city)" v-else>
          <span class="key">{{ city.name }}</span>
        </div>
        <div class="col col--4em">{{ city.stats.ordersTotal }}</div>
        <div class="col col--4em">{{ city.stats.ordersFinishedTotal }}</div>
        <div class="col col--4em">{{ city.stats.ordersFinishedPercent }}%</div>
      </div>
      <div class="row" v-for="(area, index) in areaList" :key="area.id">
        <div class="col col--2em">
          <span v-if="area.stats.ordersTotal > 0">{{ index + 1 }}</span>
          <span v-else>-</span>
        </div>
        <div class="col" v-if="areaId">{{ area.name }}</div>
        <div class="col col--click" @click="setArea(area)" v-else>
          <span class="key">{{ area.name }}</span>
        </div>
        <div class="col col--4em">{{ area.stats.ordersTotal }}</div>
        <div class="col col--4em">{{ area.stats.ordersFinishedTotal }}</div>
        <div class="col col--4em">{{ area.stats.ordersFinishedPercent }}%</div>
      </div>
      <div class="row" v-for="(government, index) in governmentList" :key="government.id">
        <div class="col col--2em">
          <span v-if="government.stats.ordersTotal > 0">{{ index + 1 }}</span>
          <span v-else>-</span>
        </div>
        <div class="col">{{ government.name }}</div>
        <div class="col col--4em">{{ government.stats.ordersTotal }}</div>
        <div class="col col--4em">{{ government.stats.ordersFinishedTotal }}</div>
        <div class="col col--4em">{{ government.stats.ordersFinishedPercent }}%</div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../mixin";
import {string, int, deepCopy} from "../util";

export default {
  name: "page-stats-order-government-city",
  title: "办结率排名-市级职能部门",
  nodes: ["/menu/stats"],
  childs: [],
  mixins: [mixin],
  data: () => ({
    loading: false,
    cityId: null,
    areaId: null,
    startTime: null,
    endTime: null,
    cityList: [],
    areaList: [],
    allData:[],
    governmentList: [],
  }),
  methods: {
    setCity(city) {
      if (this.loading) return;
      if(city.isArea){
        this.areaId = city.id
      }else {
        this.cityId = city ? city.id : "";
      }
      this.search(true)
    },
    setArea(area) {
      if (this.loading) return;
      this.areaId = area ? area.id : "";
      this.search(true)
    },
    handleBack(){
      if(this.areaId){
        this.areaId = null
        this.search(true)
        return
      }
      if(this.cityId){
        this.cityId = null
        this.search(true)
        return
      }
    },
    search(clean) {
      if (this.loading) return;
      if (clean) this.cityList = [];
      if (clean) this.areaList = [];
      if (clean) this.governmentList = [];
      let cityId = this.cityId;
      let areaId = this.areaId;
      let startTime = this.startTime;
      let endTime = this.endTime;
      this.loading = true;
      console.log('areaId',!this.areaId)
      if(!this.areaId){
        this.plugins.user.getStatsOrderDeptBackArea({cityId, startTime, endTime}).then((res) => {
          console.log(res);
          this.loading = false;
          if (res.code === 0) {
            this.cityList = (cityId || areaId) ? [] : res.data;
            this.cityList.forEach((city) => {
              city.id = city.areaId
              city.stats = {};
              city.stats.ordersTotal = city.countAll;
              city.stats.ordersFinishedTotal = city.countStatus_5;
              city.stats.ordersFinishedPercent = int(city.stats.ordersFinishedTotal / city.stats.ordersTotal, 4) / 100;
            });
            this.cityList.sort((a, b) => {
              let a1 = a.stats.ordersFinishedPercent;
              let a2 = a.stats.ordersFinishedTotal;
              let a3 = a.stats.ordersTotal;
              let a4 = a.id;
              let b1 = b.stats.ordersFinishedPercent;
              let b2 = b.stats.ordersFinishedTotal;
              let b3 = b.stats.ordersTotal;
              let b4 = b.id;
              return a1 === b1 ? a2 === b2 ? a3 === b3 ? a4 - b4 : b3 - a3 : b2 - a2 : b1 - a1;
            });
            console.log('this.cityList',this.cityList)

            this.areaList = (!cityId) ? [] : res.data;
            this.areaList.forEach((area) => {
              area.id = area.areaId
              area.stats = {};
              area.stats.ordersTotal = area.countAll
              area.stats.ordersFinishedTotal = area.countStatus_5;
              area.stats.ordersFinishedPercent = int(area.stats.ordersFinishedTotal / area.stats.ordersTotal, 4) / 100;
            });
            this.areaList.sort((a, b) => {
              let a1 = a.stats.ordersFinishedPercent;
              let a2 = a.stats.ordersFinishedTotal;
              let a3 = a.stats.ordersTotal;
              let a4 = a.id;
              let b1 = b.stats.ordersFinishedPercent;
              let b2 = b.stats.ordersFinishedTotal;
              let b3 = b.stats.ordersTotal;
              let b4 = b.id;
              return a1 === b1 ? a2 === b2 ? a3 === b3 ? a4 - b4 : b3 - a3 : b2 - a2 : b1 - a1;
            });
            console.log('this.areaList',this.areaList)

            // 没有选城市之前 市级管理员智能查看本地市的
            if (!this.cityId) {
              if (this.profile?.depments?.[0]?.dept?.city?.id) {
                const cityIds = this.profile.depments.map(x => x.dept?.city?.id).filter(x => x != null)
                this.cityList = this.cityList.filter(x => cityIds.includes(x.id))
              }
            }


          } else {
            this.plugins.modal.toast("加载失败<br>" + res.code + "：" + res.msg, "error");
          }
        });
      }else{
        // 加载部门
        this.plugins.user.getStatsOrderDeptBackDept({areaId, startTime, endTime}).then((res) => {
          console.log(res);
          this.loading = false;
          if (res.code === 0) {
            let list = res.data.map((data) => ({
              id: string(data.deptId),
              name: string(data.name),
              deptId: string(data.deptId),
              stats: {
                ordersTotal: int(data.countAll),
                ordersFinishedTotal: int(data.countStatus_5),
                ordersFinishedPercent: int(int(data.countStatus_5) / int(data.countAll), 4) / 100,
              },
            }));
            this.governmentList =  list.sort((a, b) => {
              let a1 = a.stats.ordersFinishedPercent;
              let a2 = a.stats.ordersFinishedTotal;
              let a3 = a.stats.ordersTotal;
              let b1 = b.stats.ordersFinishedPercent;
              let b2 = b.stats.ordersFinishedTotal;
              let b3 = b.stats.ordersTotal;
              return a1 === b1 ? a2 === b2 ? b3 - a3 : b2 - a2 : b1 - a1;
            }) ;

          } else {
            this.plugins.modal.toast("加载失败<br>" + res.code + "：" + res.msg, "error");
          }
        });
      }

    },
    destroy() {
      if (this.loading) return;
      return true;
    },
    init() {
      if (this.loading) return;
      this.loading = true;
      this.$root.$refs.navbar.init();
      this.plugins.user.call(async () => {
        let res = await this.plugins.user.init();
        if (res.code === 0) {
        }
        return res;
      }, async () => {
        if (this.access(this.$route.name)) return {code: 0};
        return this.env.xhrErrors.find((error) => error.code === 4);
      }).then((res) => {
        this.loading = false;
        this.$root.$refs.navbar.init();
        if (res.code === 0) {
          this.search();
        } else if (res.code === 2) {
          this.$root.$refs.navbar.login();
        } else {
          this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error").then(() => this.$router.replace("/home"));
        }
      });
    },
  },
};
</script>

<style lang="scss">
.page-stats-order-government-city {
  overflow: hidden;
}

.page-stats-order-government-city__body {
  display: flex;
  flex-direction: column;

  & > .row {
    flex: 0 0 auto;
    display: flex;
    width: 640px;

    & > .col {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 2px 2px 0;
      padding: 8px 9px;
      color: #333;
      font-size: 14px;
      line-height: 16px;
      text-align: center;
      background-color: #f6f6f6;

      & > .key {
        color: #1677ff;
      }
    }

    & > .col--click {
      cursor: pointer;
    }

    & > .col--2em {
      flex: 0 0 auto;
      width: 2em;
    }

    & > .col--3em {
      flex: 0 0 auto;
      width: 3em;
    }

    & > .col--4em {
      flex: 0 0 auto;
      width: 4em;
    }

    &:first-child {
      & > .col {
        font-weight: bold;
      }
    }
  }
}
</style>
